<template>
  <div id="app">
    <el-container style="height: 100vh;">
      <!-- 左侧导航栏 -->
      <el-aside width="250px">
        <div class="sidebar">
          <!-- Logo区域 -->
          <div class="logo">
            <img alt="Vue logo" src="./assets/logo.png" height="32">
            <h2>Kafka 工具</h2>
          </div>
          
          <!-- 导航菜单 -->
          <el-menu
            :default-active="activeIndex"
            class="sidebar-menu"
            mode="vertical"
            router
            @select="handleSelect"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409EFF">
            <el-menu-item index="/kafka-config">
              <i class="el-icon-setting"></i>
              <span slot="title">Kafka配置管理</span>
            </el-menu-item>
            <el-menu-item index="/json-parser">
              <i class="el-icon-document"></i>
              <span slot="title">JSON解析器</span>
            </el-menu-item>
            <el-menu-item index="/kafka-realtime">
              <i class="el-icon-message"></i>
              <span slot="title">Kafka实时消息</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      
      <!-- 右侧内容区域 -->
      <el-container>
        <el-header>
          <div class="header-content">
            <h3>{{ getPageTitle() }}</h3>
          </div>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
        <el-footer>
          <p>© 2025 Kafka工具 - Vue.js应用</p>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '/kafka-config'
    }
  },
  created() {
    // 根据当前路由设置活动菜单项
    this.activeIndex = this.$route.path;
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
    getPageTitle() {
      const titleMap = {
        '/kafka-config': 'Kafka配置管理',
        '/json-parser': 'JSON解析器',
        '/kafka-realtime': 'Kafka实时消息'
      };
      return titleMap[this.activeIndex] || 'Kafka工具';
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100vh;
  overflow: hidden;
}

/* 左侧导航栏样式 */
.el-aside {
  background-color: #304156;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
}

.sidebar {
  height: 100vh;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #434a54;
  background-color: #263445;
}

.logo h2 {
  margin-left: 10px;
  font-size: 1.2em;
  color: #fff;
  margin-bottom: 0;
  margin-top: 0;
}

.sidebar-menu {
  border: none;
}

.sidebar-menu .el-menu-item {
  height: 50px;
  line-height: 50px;
  padding-left: 20px !important;
}

.sidebar-menu .el-menu-item i {
  margin-right: 8px;
  font-size: 16px;
}

.sidebar-menu .el-menu-item:hover {
  background-color: #434a54 !important;
}

.sidebar-menu .el-menu-item.is-active {
  background-color: #409EFF !important;
  color: #fff !important;
}

/* 右侧内容区域样式 */
.el-header {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  padding: 0;
  height: 60px !important;
  line-height: 60px;
}

.header-content {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 20px;
}

.header-content h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.el-main {
  background-color: #f5f7fa;
  padding: 20px;
  overflow-y: auto;
}

.el-footer {
  text-align: center;
  background-color: #fff;
  color: #909399;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
  height: 50px !important;
  line-height: 20px;
}

.el-footer p {
  margin: 0;
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .el-aside {
    width: 200px !important;
  }
  
  .logo h2 {
    font-size: 1em;
  }
  
  .sidebar-menu .el-menu-item {
    padding-left: 15px !important;
  }
}
</style>
